<template>
	<view>
		<view class="logo">
			<image src="https://s1.ax1x.com/2023/08/28/pPad9aQ.png" mode=""></image>
		</view>
    <view class="WeChat_name">七七饮食</view>
		<button class="login_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">
			<image src="https://s1.ax1x.com/2023/09/09/pPcl29J.png" mode=""></image>
			微信一键登录
		</button>
		<view class="footer">
			<text>登录/注册即视为你同意《服务条款》和《隐私协议》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxCode: "",
				// 用户信息
				userinfo: {

				}
			};
		},
		methods: {
			/**
			 * 获得用户code
			 */
			getCode() {
				uni.login({
					success(e) {
						this.wxCode = e.code
					},
					fail() {
						uni.$showMsg('网络异常，请稍后重试')
					}
				})
			},
			/**
			 * 获得用户信息
			 */
			getUserInfo(e) {
				var _this = this
				wx.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(res) {
						//如果用户点击了确定按钮
						if (res.confirm) {
							wx.getUserProfile({
								desc: '获取你的昵称、头像、地区及性别',
								success: res => {
									// 获取code
									uni.login({
										success(res) {
											let code = res.code;
											// 通过code换取openId
											wx.request({
												url: `https://api.weixin.qq.com/sns/jscode2session?appid=wxf25f77b3f0f94c21&secret=da2644d21db8d3b17e0bfaec7fb68d5a&js_code=${code}&grant_type=authorization_code`,
												success: (res) => {
													_this.userinfo.openid = res.data.openid
													uni.setStorageSync('openid', _this.userinfo.openid)
													uni.reLaunch({
														url:'/pages/wode/wode',
														success: () => {
															uni.$showMsg('登录成功！即将跳转')
														}
													})
												},
												fail: (err) => {
													uni.$showMsg('网络异常，请稍后重试')
												},
											})

										},
										fail() {
											uni.$showMsg('网络异常，请稍后重试')
										}
									})
									// 获取到性别-昵称-头像
									_this.userinfo.gender = res.userInfo.gender;
									_this.userinfo.nickName = res.userInfo.nickName
									_this.userinfo.avatarUrl = res.userInfo.avatarUrl
									uni.setStorageSync('gender', _this.userinfo.gender)
									uni.setStorageSync('nickName',_this.userinfo.nickName)
									uni.setStorageSync('avatarUrl',_this.userinfo.avatarUrl)
								},
								fail: err => {
									console.log(err)
									//拒绝授权
									wx.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
									return;
								}
							});
						} else if (res.cancel) {
							//如果用户点击了取消按钮
							wx.showToast({
								title: '您拒绝了请求,不能正常使用小程序',
								icon: 'error',
								duration: 2000
							});
							return;
						}
					}
				})
			},
			onShow() {
				this.getCode()
			}
		},
	}
</script>

<style lang="scss">
	.logo {
		width: 240rpx;
		height: 240rpx;
		margin: 0 auto;
		margin-top: 166rpx;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
  
  
  .WeChat_name{
    font-family: '楷体';
    font-size: 68rpx;
    text-align: center;
    margin-top: 20rpx;
  }

	.login_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 672rpx;
		height: 88rpx;
		border-radius: 32rpx;
		margin-top: 172rpx;
		color: #fff;
		font-size: 36rpx;
		background-color: rgb(255, 121, 83);

		image {
			width: 46rpx;
			height: 40rpx;
			vertical-align: middle;
			margin-right: 20rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 130rpx;
		width: 100%;
		text-align: center;
	}
</style>